<!--
* @description:地图显示
* @fileName: OnlineTraceException
* @author:石锦涛
* @date:2022-02-10
* @后台人员:石锦涛
-->
<template>
  <div class="ditu">
    <baidu-map
      class="bm-view"
      ak="P6dCYHL2QZMahBff6ei3TlGlvKejZuOS"
      :center="{ lng: 116.404, lat: 39.915 }"
      :zoom="11"
    >
    <div v-for="(item,index) in showAll" :key="index">
      <bm-driving
        :start="item.BeginAddr"
        :end="item.EndAddr"
        @searchcomplete="handleSearchComplete"
        :panel="false"
        :autoViewport="true"
      >
      </bm-driving>
      </div>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bml-lushu
        @stop="reset"
        :path="path"
        :icon="icon"
        :play="play"
        :rotation="true"
      >
      </bml-lushu>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmDriving from "vue-baidu-map/components/search/Driving.vue";
import BmlLushu from "vue-baidu-map/components/extra/Lushu.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation.vue";

export default {
  components: {
    BaiduMap,
    BmDriving,
    BmlLushu,
    BmNavigation,
  },
  data() {
    return {
      play: true,
      path: [],
      icon: {
        url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
      showAll: [],
      begin: "",
      endin: "",
    };
  },
  methods: {
    reset() {
      this.play = false;
    },
    handleSearchComplete(res) {
      this.path = res.getPlan(0).getRoute(0).getPath();
    },

    showchu() {
      
       let userid = sessionStorage.getItem("userid");
      this.$axios
        .get(
          "https://localhost:44399/api/app/line-app/" + userid + "/page-id"
        )
        .then((res) => {
          this.showAll = res.data;
        });
    },
  },
  created() {
    this.showchu();
  },
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 100%;
}
.ditu {
  width: 900px;
  height: 700px;
}
</style>